<template>
	<view class="container">
		<template v-if="status === 0">
			<view class="surplus">
				{{$t('c.surplus')}}
				<u-count-down class="count-down" :time="30 * 60 * 60 * 1000" format="HH:mm:ss" @change="countDown">
					<view class="time">
						<text>{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}:</text>
						<text>{{ timeData.minutes > 10 ? timeData.minutes : '0' + timeData.minutes }}:</text>
						<text>{{ timeData.seconds > 10 ? timeData.seconds : '0' + timeData.seconds }}</text>
					</view>
				</u-count-down>
				{{$t('order.reservation.end')}}
			</view>
			<view class="gap">
				{{$t('order.reservation.gap').replace('{$n}', 123)}}
			</view>
		</template>
		<view v-else-if="status === 1" class="res">
			<u-icon name="/static/icon/success.png" size="128rpx"></u-icon>
			<view>{{$t('order.reservation.success')}},{{$t('order.reservation.deliver')}}</view>
		</view>
		<view v-else-if="status === 2" class="res">
			<u-icon name="/static/icon/fail.png" size="128rpx"></u-icon>
			<view>{{$t('order.reservation.fail')}},{{$t('order.reservation.refund')}}</view>
		</view>
		<view class="handle">
			<view v-if="status" class="btn warn" @click="orderInfo">{{$t('order.info.lock')}}</view>
			<view class="btn" @click="goIndex">{{$t('app.back-index')}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 0,
				timeData: {}
			}
		},
		methods: {
			countDown(e) {
				this.timeData = e
			},
			orderInfo() {
				uni.navigateTo({
					url: '/pages/order/info'
				})
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-weight: 600;
	}

	.surplus {
		margin-top: 110rpx;
		align-items: center;
		text-align: center;
		justify-content: center;
		width: 100%;
		display: flex;

		.count-down {
			margin: 0 24rpx;

			.time {
				font-size: 64rpx;
				color: #E35525;
			}
		}
	}

	.gap {
		display: flex;
		margin: 110rpx 24rpx 0 24rpx;
		border-radius: 50rpx;
		background-color: rgba(227, 85, 37, 0.08);
		font-size: 36rpx;
		color: #E35525;
		width: calc(100% - 96rpx);
		padding: 24rpx;
		justify-content: center;
	}

	.res {
		margin-top: 110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 36rpx;
		color: #141B24;
	}

	.handle {
		display: flex;
		justify-content: center;

		.btn:not(:first-child) {
			margin-left: 16rpx;
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 160rpx;
			padding: 27rpx 72rpx;
			border-radius: 52rpx;
			border: 1rpx solid rgba(3, 55, 135, 1);
			background-color: rgba(3, 55, 135, 0.1);
			font-size: 36rpx;
			color: rgba(3, 55, 135, 1);
		}
		
		.warn {
			border: 1rpx solid rgba(227, 85, 37, 1);
			background-color: rgba(227, 85, 37, 0.1);
			color: rgba(227, 85, 37, 1);
		}
	}
</style>